<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
		$(function(){
			$('.mc').draggable().draggable();
			$('#dd1').draggable({
				
				onStartDrag:function(){
					$('#info').html('start drag:'+$(this).css('left'));
				}
			});
			$('#dd2').draggable({axis:null,handle:'#title'});

			$('#mydd').draggable();
		});

		function start(){
			$('#dd1').draggable({disabled:false,edge:5});
		}
		function stop(){
			$('#dd1').draggable({disabled:true});
		}
	</script>
</head>
<body>
	<div id="info" style="top:300px;height:20px;border:1px solid #ccc;">info</div>
	<div style="position:relative;overflow:auto;width:400px;height:200px;border:1px solid #ccc;">
		<div style="width:500px;height:20px;border:1px solid blue;"></div>
		<div id="dd1" class="mc" style="margin:0px;width:100px;height:100px;background:#ccc;border:1px solid red;">
			<a href="#" onclick="start()">start drag1</a><br/>
			<a href="#" onclick="stop()">stop drag</a>
		</div>
	</div>
		<div id="dd2" class="mc" style="margin:10px;width:100px;height:100px;background:#fafafa;border:1px solid red;">
			<div id="title" style="background:#ccc;">title</div>
		</div>
		<div style="height:200px;width:1500px;border:1px solid red;"></div>
		
		
		<div id="mydd" style="width:100px;height:100px;background:red;"></div>
</body>
</html>